<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'

const router = useRouter()
const authStore = useAuthStore()

const activeTab = ref('login')
const isLoading = ref(false)

const loginForm = ref({
  username: '',
  password: '',
})
const login = async () => {
  isLoading.value = true;
  try {
    const response = await authStore.login(loginForm.value);
    if (response && response.success) {
      router.push('/livemanger');
    } else {
      alert(response?.message || '登录失败，请检查用户名和密码');
    }
  } catch (error) {
    console.error('登录错误:', error);
    alert(error.response?.data?.message || error.message || '登录失败');
  } finally {
    isLoading.value = false;
  }
}
</script>
<template>
  <div class="top">
    <div class="top_left">青书</div>
     <div class="top_right">直播管理平台</div>
  </div>
  <div class="center">
    <div class="center_left">
      <div class="center_left_top">使用我们让直播更轻松便捷</div>
      <div class="center_left_bottom">高效的直播管理 丰富的数据展示</div>
    </div>
    <div class="center_right">
      <form v-if="activeTab === 'login'" @submit.prevent="login">
        <input
              type="text"
              id="login-username"
              v-model="loginForm.username"
              placeholder="请输入用户名"
              required
            >
        <input
              type="password"
              id="login-password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              required
            >
            <button type="submit" class="submit-btn" :disabled="isLoading">
            {{ isLoading ? '登录中...' : '登录' }}
          </button>
      </form>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.top {
  display: flex;
  align-items: center;
  padding: 20px 40px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.top_left {
  color: #00f5dc;
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}
.top_right {
  font-size: 18px;
  color: #333333;
  font-weight: 500;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 76px);
  background-color: #f7f7f7;
  padding: 40px;
  gap: 80px;
  background: url("https://picasso-static.xiaohongshu.com/fe-platform/2bc87217882d78e54529086cfadb96d16d991a9e.png") no-repeat center center fixed;;
  
}
.center_left {
  max-width: 500px;
}
.center_left_top {
  font-size: 42px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
  line-height: 1.3;
}
.center_left_bottom {
  font-size: 20px;
  color: #666666;
  line-height: 1.6;
}
.center_right {
  width: 360px;
}
.center_right form {
  background-color: #ffffff;
  padding: 36px 30px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.center_right input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}
.center_right input::placeholder {
  color: #cccccc;
}
.center_right input:focus {
  outline: none;
  border-color: #00f5dc;
}
.submit-btn {
  width: 100%;
  padding: 14px;
  background-color: #00f5dc;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.submit-btn:hover:not(:disabled) {
  background-color: #00f5dc;
}
.submit-btn:disabled {
  background-color: #ffb8c2;
  cursor: not-allowed;
}
</style>